<template>
    <div>
        <div id="myChart" :style="{width:'300px',height:'300px'}">
           {{msg}}
        </div>
          <el-row>
      <el-col :span="8">111</el-col>
      <el-col :span="8">222</el-col>
      <el-col :span="8">333</el-col>
    </el-row>

    </div>
  
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
     msg:'你好，皮卡丘！'
    }
  },
  mounted(){
    this.drawLine();
  },
  methods:{
    drawLine(){
      //初始化echarts 实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      //绘制图biao
      myChart.setOption({
        title:{text:'在vue中使用echarts'},
        tooltip:{},
        xAxis:{
          data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
        },
        yAxis:{},
        series:[{
          name:'销量',
          type:'bar',
          data:[5,20,36,10,10,20]
        }]
      });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 #myChart{
   margin: 100px auto
 }
</style>
